<template>
  <div class="find">
   

<div id="find-top-bg">
      <img src="../assets/find-bg-01.png" style="width: 100%;height: 50%;">
    </div>

    <div class="find-behind">
      <mt-button type="primary" size="normal" style="background-color: #00bfa5;" class="find-btn" @click="zhuan1">
        更多义行
      </mt-button>
      &nbsp;&nbsp;
      <mt-button type="default" size="normal" class="find-btn" @click="zhuan2">
        我的报名
      </mt-button>
      <br/><br/>

      <mt-cell title="" is-link to="/more" style="text-align: left;">
        <img slot="icon" src="../assets/foot.png" width="27%" height="27%">

        <span style="color: green">更多</span>

      </mt-cell>

      <!--上面部分的循环显示,改写完成-->
      <ul>
        <li v-for="three in threelist">
          <mt-cell title="" is-link to="/test">
            <img :src="three.src" class="find-top-img">
          </mt-cell>
        </li>
     
      </ul>
    </div>
    <br/>
    <div id="find-remen">
      <p style="color: #00bfa5; font-weight:bold;font-size: 25px;">/* 热门义行 */</p>

      <br/>

      <div style="border:solid 2px #878787;">
        <div class="nav">
          <mt-button size="small" @click.native.prevent="active = 'tab-container1'">人气<mt-badge type="error">hot</mt-badge></mt-button>
          &nbsp;&nbsp;&nbsp;
          <mt-button size="small" @click.native.prevent="active = 'tab-container2'">鲜为人知</mt-button>
        </div>

        <div class="page-tab-container">
          <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
            <mt-tab-container-item id="tab-container1">
              <mt-cell
              <div class="find-hot">

                <!--改写成动态绑定-->
                <mt-cell title="" is-link to="/test" v-for="w in messagelist">
                  <ul>
                    <li>
                      <img :src="w.src">
                      <div style="width:100%;">
                        <h>{{w.where}}</h>
                        <p>{{w.beizhu}}</p>
                      </div>
                    </li>
                  </ul>
                </mt-cell>


                </mt-cell>
              </div>
              </mt-cell>
            </mt-tab-container-item>

            <br/><br/>
            <mt-tab-container-item id="tab-container2">
              <mt-cell
              <div class="find-hot">
                <!--改写成动态绑定-->
                <mt-cell title="" is-link to="/test" v-for="w2 in messagelist2">
                  <ul>
                    <li>
                      <img :src="w2.src">
                      <div style="width:100%;">
                        <h>{{w2.where}}</h>
                        <p>{{w2.beizhu}}</p>
                      </div>
                    </li>
                  </ul>
                </mt-cell>

              </div>

              </mt-cell>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <div class="find-change-geshi"></div>

    </div>

  </div>

</template>

<script>
  import Vue from 'vue'

  export default {
    name: 'find',
    data () {
    return {
      active: 'tab-container1',
      threelist:[
                  {"src":require("../../src/assets/guangdong.png")},
                  {"src":require("../../src/assets/ximalaya.jpg")},
                  {"src":require("../../src/assets/fujian.jpg")},
      ],
      messagelist:[
        {
          "src":require("../assets/sanya.jpg"),
          "where":"三亚",
          "beizhu":"带你到海边忘掉城市的喧嚣，忘掉生活的烦恼"
        },
        {
          "src":require("../assets/changsha.jpg"),
          "where":"长沙",
          "beizhu":"橘子红时，漫步最美长沙橘子洲头"
        },
        {
          "src":require("../assets/dali.jpg"),
          "where":"大理",
          "beizhu":"阳光与花海，最甜蜜的相伴"
        },
      ],
      messagelist2:[
        {
          "src":require("../assets/changdao.jpg"),
          "where":"山东长岛",
          "beizhu":"山东省唯一的海岛县，享受赶海的乐趣"
        },
        {
          "src":require("../assets/libo.jpg"),
          "where":"黔南荔波",
          "beizhu":"卧龙潭瀑布，飞流直下，喀斯特森林，满眼翠绿，这里是贵州南部的天然氧吧"
        },
        {
          "src":require("../assets/shantou.jpg"),
          "where":"广东汕头",
          "beizhu":"走进汕头老城区，带你回味历史，细看骑楼"
        },
      ]

    }},
  methods: {
    zhuan1(){
     
    },
    zhuan2(){
  
    }

  },

  computed: {

  },
  components: {}

  }
</script>


<style>
  ul,li{
    list-style:none;
  }
  .find-hot li{
    height: 100px;
  }
  .find-hot img{
    width: 100px;
    height: 100px;
    float: left;
    padding-right: 15px;
  }
  .find-hot{
    text-align: left;
  }
  #find-remen{
    text-align: center;
  }
  .find-behind{
    text-align: center;
  }
  .find-hot h{
    font-size:20px;
  }
  .find-hot p{
    color:#cccccc;
    font-size: 15px;
    width:700px;
  }
  .find-top-img{
    width: 100%;
    height: 30%;
  }

  .item {
    display: inline-block;
  }

  .nav {
    padding: 15px;
  }
  .find-change-geshi{
    width: 100%;
    height: 50px;
  }

  .link {
    color: inherit;
    padding: 20px;
    display: block;
  }
  .find-text{
    text-align: left;
    font-family:方正舒体;
    font-size:30px;
  }

  .find-btn{
    width:30%;
    height: 30%;
  }
  #find-search{
    position:fixed;
    bottom:60px;
    right:40px;
  }
  .find-behind{
    margin-top: 3%;
  }

</style>
